<template>
    <div>
        <div class="title">房源信息&nbsp;&nbsp;</div>
        <!-- 房屋信息 -->
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="userInfoBox">
                    <div>
                        <el-avatar :size="200" :src="houseInfo.imageUrl"></el-avatar>
                    </div>
                    <div>房东:{{ userInfo.userName }}</div>
                    <div>电话:{{ houseInfo.contact }}</div>
                </div>
            </el-col>
            <el-col :span="16">
                <el-carousel :interval="5000" arrow="hover" width="800px" height="400px">
                    <el-carousel-item v-for="(item, index) in carouselImg" :key="index">
                        <img :src="houseInfo.imageUrl" width="100%" height="100%" />
                    </el-carousel-item>
                </el-carousel>
            </el-col>
        </el-row>
        <!-- /房屋信息 -->

        <!-- 房源简介 -->
        <div class="title">房源详情</div>
        <div class="samlltitle">租金:{{ houseInfo.price }}RMB/月</div>
        <!-- <div class="housedescribe"> -->
        <el-table :data="tableData" style="width: 100%;font-size: 18px;" :row-class-name="tableRowClassName">
            <el-table-column prop="type" label="类型" width="180"></el-table-column>
            <el-table-column prop="cityName" label="城市" width="180"></el-table-column>
            <el-table-column prop="address" label="地址" width="320px"></el-table-column>
            <el-table-column prop="contact" label="电话"></el-table-column>
            <el-table-column prop="floor" label="楼层"></el-table-column>
            <el-table-column prop="price" label="押金"></el-table-column>
            <el-table-column prop="area" label="面积(平方米)"></el-table-column>
        </el-table>
        <!-- </div> -->
        <!-- /房源简介 -->

        <!-- 开始租房 -->
        <div class="title">我要租它</div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="起租月" prop="startDate">
                <el-col :span="5">
                    <el-tooltip class="item" effect="dark" content="您租期的第一个月" placement="right">
                        <el-date-picker v-model="ruleForm.startDate" type="month" placeholder="起始年月"
                            :picker-options="pickerOptions0" autocomplete="off" style="width:100%"
                            value-format="yyyy-MM">
                        </el-date-picker>
                    </el-tooltip>
                </el-col>
            </el-form-item>

            <el-form-item label="截至月" prop="endDate">
                <el-col :span="5">
                    <el-tooltip class="item" effect="dark" content="您租期的最后一个月" placement="right">
                        <el-date-picker v-model="ruleForm.endDate" type="month" placeholder="结束年月"
                            :picker-options="pickerOptions0" autocomplete="off" style="width:100%"
                            value-format="yyyy-MM">
                        </el-date-picker>
                    </el-tooltip>
                </el-col>
            </el-form-item>

            <el-form-item label="年龄" prop="age">
                <el-col :span="5">
                    <el-tooltip class="item" effect="dark" content="您的年龄必须大于18" placement="right">
                        <el-input v-model.number="ruleForm.age" suffix-icon="el-icon-warning-outline" placeholder="年龄">
                        </el-input>
                    </el-tooltip>
                </el-col>
            </el-form-item>

            <el-form-item>
                <el-col :span="5">
                    <el-button type="primary" @click="submitForm('ruleForm')">下单</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-col>
            </el-form-item>
        </el-form>
        <!-- /开始租房 -->
    </div>
</template>

<script>
export default {
    name: "IHouseInfo",
    data() {
        var checkAge = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('年龄不能为空'));
            }
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    if (value < 18) {
                        callback(new Error('必须年满18岁'));
                    } else {
                        callback();
                    }
                }
            }, 1000);
        };
        var validateStartDate = (rule, value, callback) => {
            if (value === '') {
                return callback(new Error('请输入起租年月'));
            }
            callback();
        };
        var validateEndDate = (rule, value, callback) => {
            if (value === '') {
                return callback(new Error('请输入结束年月'));
            }
            let startArray = this.ruleForm.startDate.split("-");
            let endArray = this.ruleForm.endDate.split("-");

            this.ruleForm.startYear = startArray[0];
            this.ruleForm.startMonth = startArray[1];
            this.ruleForm.endYear = endArray[0];
            this.ruleForm.endMonth = parseInt(endArray[1]) + 1;
            this.ruleForm.defMonth = (this.ruleForm.endYear - this.ruleForm.startYear) * 12 + this.ruleForm.endMonth - this.ruleForm.startMonth;
            if (this.ruleForm.defMonth < 0)
                return callback(new Error('结束年月不能在开始年月之前'));
            callback();
        };
        return {
            id: this.$route.query.id,
            userInfo: {
                avatarUrl: require("../../assets/carousel_2.jpg"),
                userName: "可可今天不吃肉",
                phone: "12345678910",
            },
            houseInfo: {},
            carouselImg: [
                { itemImg: require("../../assets/carousel_1.jpg"), itemTitle: "" },
                { itemImg: require("../../assets/carousel_2.jpg"), itemTitle: "" },
                { itemImg: require("../../assets/carousel_3.jpg"), itemTitle: "" },
                { itemImg: require("../../assets/carousel_4.jpg"), itemTitle: "" },
                { itemImg: require("../../assets/carousel_5.png"), itemTitle: "" },
                { itemImg: require("../../assets/carousel_6.jpg"), itemTitle: "" },
            ],
            tableData: [],
            // 租房表单
            ruleForm: {
                startDate: "",
                endDate: "",
                age: '',
                startYear: "",
                endYear: "",
                startMonth: "",
                endMonth: "",
                defMonth: ""
            },
            rules: {
                startDate: [
                    { validator: validateStartDate, trigger: 'blur' }
                ],
                endDate: [
                    { validator: validateEndDate, trigger: 'blur' }
                ],
                age: [
                    { validator: checkAge, trigger: 'blur' }
                ]
            },
            // /租房表单

            // 只能选择今天之后的日期
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            // /只能选择今天之后的日期
        }
    },
    methods: {
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex === 1) {
                return 'warning-row';
            } else if (rowIndex === 3) {
                return 'success-row';
            }
            return '';
        },
        // 表单提交和清空
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert(this.ruleForm.defMonth);
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // /表单提交和清空

        // 初始化表单
        initHouseInfo() {
            let self = this;
            this.axios({
                url: "http://127.0.0.1:8000/api/house/getHouse/" + self.id,
                method: "get",
            }).then(function (response) {
                console.log(response);
                self.houseInfo = response;
                self.tableData = [response];
            }).catch(function (error) {
            });
        }
        // /初始化表单
    },
    mounted: function () {
        this.initHouseInfo();
    }
}
</script>

<style scoped>
.title {
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 24px;
    height: 50px;
    line-height: 50px;
}

.samlltitle {
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 20px;
    height: 50px;
    line-height: 50px;
}

/* 分栏 */
.el-row {
    margin-bottom: 20px;


    /* &:last-child {

/* 
    &:last-child {

        margin-bottom: 0;
    } */
}

.el-col {
    border-radius: 4px;
}

.userInfoBox {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.userInfoBox div {
    text-align: left;
    width: 500px;
    font-size: 20px;
    margin-top: 20px;
    /* background-color: red; */
}

/* /分栏 */

/* 轮播图 */
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}

/* /轮播图 */

/* 房源简介 */
.housedescribe {}

.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}

/* /房源简介 */
</style>